<template>
  <div class="h-100% w-100%">
    <div class="menu-box">
      <!-- 目录 -->
      <div class="menu-tree">
        <div class="tree-top" @click="editMenu(null, 'add')">
          <icon-font type="icon-jia" />
          <span>添加目录</span>
        </div>
        <ATree
          :default-selected-keys="selectedKeys"
          :selected-keys="selectedKeys"
          :tree-data="treeData"
          @select="onSelect"
        >
          <template #title="dir">
            <div class="leaf">
              <icon-font v-if="dir.icon" :type="dir.icon" style=" margin-right: 5px;font-size: 12px;" />
              <span>{{ dir.menuName }}</span>
              <icon-font class="edit-btn" type="icon-yumengtubiao_bianji-1" @click="editMenu(dir, 'edit')" />
              <icon-font class="edit-delete" type="icon-ashbin" @click="deleteMenu(dir)" />
            </div>
          </template>
        </ATree>
      </div>
      <div class="catalog">
        <div class="catalog-top">
          <div>{{ currentMenu.menuName }}</div>
          <div>
            <a-button type="primary" size="small" @click="editMenu(currentMenu, 'add')">
              <icon-font type="icon-jia" />添加菜单
            </a-button>
          </div>
        </div>
        <div v-if="currentMenu.children.length < 1" class="mt-200px">
          <a-empty />
        </div>
        <div class="catalog-content">
          <div v-for="item in currentMenu.children" :key="item.id" class="menu-item">
            <icon-font v-if="item.type === 'C' && item.icon" :type="item.icon" />
            <span>{{ item.menuName }}</span>
            <icon-font class="edit-btn" type="icon-yumengtubiao_bianji-1" @click="editMenu(item, 'edit')" />
            <icon-font class="edit-delete" type="icon-ashbin" @click="deleteMenu(item)" />
          </div>
        </div>
      </div>
    </div>
    <AddMenu ref="addMenuRef" @flush="getMenuTree" />
  </div>
</template>

<script setup>
import { Tree as ATree } from 'ant-design-vue'
import AddMenu from './AddMenu.vue'

defineOptions({
  name: 'SystemMenu',
})

const addMenuRef = ref(null)

const treeData = ref([]) //
const currentMenu = ref({ children: [], menuName: '', id: '' })
const selectedKeys = ref([]) //

function getBtnList(parentId) {
  httpRequest('/admin/menu/btns', { id: parentId }).then((list) => {
    currentMenu.value.children = list || []
  })
}

function onSelect(keys, info) {
  selectedKeys.value = keys
  currentMenu.value = info.node
  currentMenu.value.children = currentMenu.value.children || []
  if (currentMenu.value.type == 'C') {
    getBtnList(currentMenu.value.id)
  }
}

// 编辑菜单
function editMenu(data, type) {
  addMenuRef.value.open(data, type)
}

// 删除菜单
function deleteMenu(item) {
  if (item.children && item.children.length > 0) {
    message.warning('请先删除子菜单')
    return
  }
  httpRequest('/admin/menu/delete', { id: item.id }).then((res) => {
    getMenuTree()
  })
}

// 获取菜单树
function getMenuTree(isInit) {
  httpRequest('/admin/menu/tree', {}).then((treeList) => {
    treeData.value = treeList
    if (isInit) {
      currentMenu.value = treeList[0] ?? { children: [] }
      selectedKeys.value = [currentMenu.value.id]
    }
  })
}

// 刷新菜单树
function flush(type) {
  if (type == 'F') {
    getBtnList(currentMenu.value.id)
  }
  else {
    getMenuTree(false)
  }
}

getMenuTree(true)
</script>

<style lang="less" scoped>
.menu-box {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 15px;
  overflow: hidden;

  .menu-tree {
    width: 240px;
    height: 100%;
    padding: 15px;
    overflow: auto;
    background: #fff;
    border-right: 1px solid #e6e6e6;

    .tree-top {
      padding-bottom: 10px;
      margin-bottom: 10px;
      color: #165dff;
      text-align: center;
      cursor: pointer;
      border-bottom: 1px solid #f1f2f5;
    }

    .leaf {
      display: flex;
      align-items: center;

      .edit-btn {
        display: none;
      }

      .edit-delete {
        display: none;
      }

      &:hover {
        background: #f1f2f5;

        .edit-btn {
          display: block;
          margin: 0 10px;
          color: #165dff;
          cursor: pointer;
        }

        .edit-delete {
          display: block;
          color: #ff4d4f;
          cursor: pointer;
        }
      }
    }
  }

  .catalog {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    padding: 0 20px;
    background: #fff;

    .catalog-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 42px;
      color: #165dff;
      border-bottom: 1px solid #f1f2f5;
    }

    .catalog-content {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      margin-top: 10px;

      .menu-item {
        margin: 10px 20px 0 0;
        color: #777;

        .edit-btn {
          margin: 0 8px;
          font-size: 14px;
          color: #165dff;
          cursor: pointer;
        }

        .edit-delete {
          font-size: 14px;
          color: #ff4d4f;
          cursor: pointer;
        }

        .add-btn {
          font-size: 14px;
          color: #165dff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
